<template>
    <div class="swiper_box">
        <div class="swiper_header" v-if="props.showHeader">
            <div class="header_title" :class="current==(index+1)?'active':'default'" v-for="(item , index) in data" @click.stop="()=>{ changeCurrent(index+1) }" :key="index+1">{{item.title}}</div>
        </div>
        <div class="swiper_content">
            <a-carousel v-model:current="current"
                        autoPlay
                        @change="change"
                        v-bind="swiperOptions"
                        >
                <a-carousel-item v-for="(item , index) in data" :key="index+1">
                    <!-- 如果有自定义节点 ， 使用插槽自定义节点 -->
                    <template v-if="slots.hasOwnProperty('content') && onLoad">
                        <slot name="content" :index="index+1" :data="item" :load="onLoad"/>
                    </template>
                    <div v-else>请传入content插槽</div>
                </a-carousel-item>
            </a-carousel>
        </div>
    </div>
</template>

<script setup>
    // 接收参数
    const props = defineProps({
        data:{
            type:Array,
            default:()=>new Array()
        },
        showHeader:{
            type:Boolean,
            default:()=>false
        },
        config:{
            type:Object,
            default:()=>new Object()
        }
    });
    // 使用slots宏
    const slots = useSlots();
    // a-carousel组件当前绑定的页面
    const current = ref(1);

    // 如果要给组件设置默认配置
    // 可以传入a-carousel组件默认支持的属性，change()是current变化的回调函数
    const defaultOptions = {
        // autoPlay: true,
        // indicatorType:"never",
        // showArrow:"never",
        // moveSpeed: 5000,
        // change: (value)=>{ }
    };
    // a-carousel组件配置项
    const swiperOptions = ref({});

    // 手动切换当前展示的轮播
    const changeCurrent = (index)=>{
        current.value = index;
        change(index);
    }

    // 切换后的回调
    const change=(index)=>{
        const { config } = props;
        if(config.change){
            config.change(index);
        }
    }

    // 记录组件的加载状态
    const  onLoad = ref(false)

    // 初始化轮播配置
   const setOptions = async ()=>{
       const { config } = props;
       const options = { ...defaultOptions };
       if(config){
           for (let k in config){
               if(typeof config[k] !== 'function' ){
                   options[k] = config[k]
               }
           }
       }
       swiperOptions.value = options;

       await nextTick()

       onLoad.value = true

    }


    // 初始化组件配置
    onMounted(()=>{
        setOptions();
    })



</script>

<style scoped lang="less">
    .swiper_box{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 0.1rem 0;
        .swiper_header{
            display: flex;
            justify-content: space-evenly;
            height: .3rem;
            line-height: .3rem;
            .header_title{
                flex: 1;
                margin-right: 0.1rem;
                // padding: 0.03rem 0.1rem;
                display: flex;
                justify-content: center;
                align-items: center;
                // border-radius: 10%;
                font-size: 0.14rem;
                &.active{
                    // background: #009d9e;
                    color: #fff;
                   // font-size: 0.16rem;
                    font-weight: bold;
                    border-bottom: 2px solid #01aef3;
                }
                &.default{
                    color: #01aef3;
                   // font-size: 0.16rem;
                    font-weight: bold;
                    // background: var(--color-neutral-2);
                }
            }
        }
        .swiper_content{
            flex: 1;
            display: flex;
            > .arco-carousel{
                height: 100%;
                flex: 1;
            }
            ::v-deep{

            }

        }

    }

</style>